<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=yes" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>收货地址</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="./css/address.css" />
		<style type="text/css">
			#app {
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="container">
				<div class="address_card">
					<van-cell-group>
						<van-field
							v-model="address.contact_person"
							label="收件人"
							placeholder="请输入收货人名字"
						>
						</van-field>
						<van-field
							v-model="address.contact_phone"
							label="联系电话"
							placeholder="联系电话"
						>
						</van-field>
						<van-field
							v-model="area"
							label="所在地区"
							readonly
							placeholder="省、市、区"
							@click="show = true"
							@change="onChange"
							is-link
						>
						</van-field>
						<van-field
							v-model="address.contact_address"
							label="详细地址"
							placeholder="详细收货地址"
						>
						</van-field>
						<van-cell center title="设置为默认地址">
							<template #right-icon>
								<van-switch v-model="address.is_default" size="24" />
							</template>
						</van-cell>
					</van-cell-group>
					<van-popup v-model:show="show" round position="bottom">
						<van-cascader
							v-model="cascaderValue"
							title="请选择所在地区"
							:options="options"
							:field-names="fieldNames"
							@close="show = false"
							@finish="onFinish"
						/>
					</van-popup>
				</div>
				<van-button
					v-if="isEdit"
					class="btn"
					@click="handleDelete"
					style="margin-bottom: 1.12rem"
					>删除</van-button
				>
				<van-button class="btn" @click="handleClick">保存并使用</van-button>
			</div>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<script src="./js/adjust.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script src="../common/js/swiper.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
			getNow,
		} from '../common/js/api/vue3-axios-utils.js'

		const PatientData = {
			data() {
				return {
					area: '',
					address: {},
					isEdit: false,
					show: false,
					options: [],
					addressCode: [],
					pid: '',
					fieldNames: {
						text: 'name',
						value: 'code',
					},
				}
			},
			watch: {
				'address.area'(n) {
					// console.log(n)
				},
			},
			created() {
				this.type = url('?type')
				this.pid = url('?pid')
				this.active = url('?active')
				this.address = JSON.parse(sessionStorage.getItem('area')) || {}
				if (this.address.contact_province_name) {
					console.log(this.address)
					this.isEdit = true
					this.area =
						this.address.contact_province_name +
						'/' +
						this.address.contact_city_name +
						'/' +
						this.address.contact_district_name
					this.address.is_default = 1 ? true : false
				}
				this.getLocation()
			},
			mounted() {},
			methods: {
				getLocation() {
					getAction(spliceUrl('/shop/dict/pcd'), {}).then(res => {
						res = res.data
						if (res.success) {
							this.options = this.treeData(
								res.data.map(v => {
									if (!v.code) {
										v = v.children[0]
									}
									return v
								})
							)
						} else {
							this.$toast.fail({
								message: res.message,
							})
						}
					})
				},
				onChange(item) {
					console.log(item)
				},
				treeData(data) {
					for (let i = 0; i < data.length; i++) {
						if (data[i].children.length == 0) {
							data[i].children = undefined
						} else {
							this.treeData(data[i].children)
						}
					}
					return data
				},
				handleDelete() {
					postAction(spliceUrl('/shop/address/delete'), {
						data_id: this.address.data_id,
					}).then(res => {
						res = res.data
						if (res.success) {
							this.$toast.success({
								message: '删除成功',
							})
							window.location.href =
								'./confirm.html?type=' +
								this.type +
								'&pid=' +
								this.pid +
								'&active=' +
								this.active
						} else {
							this.$toast.fail({
								message: res.message,
							})
						}
					})
				},
				handleClick() {
					this.address.is_default = true ? 1 : 0
					this.address.patient_id = this.address.patient_id
						? this.address.patient_id
						: this.pid
					this.address.data_id = this.address.data_id
						? this.address.data_id
						: ''
					console.log(this.address)
					postAction(spliceUrl('/shop/address/save'), this.address).then(
						res => {
							res = res.data
							if (res.success) {
								this.$toast.success({
									message: '保存成功',
								})
								sessionStorage.removeItem('area')
								window.location.href =
									'./confirm.html?type=' +
									this.type +
									'&pid=' +
									this.pid +
									'&active=' +
									this.active
							} else {
								this.$toast.fail({
									message: res.message,
								})
							}
						}
					)
					// history.back()
				},
				onFinish({ selectedOptions }) {
					this.show = false
					const area = selectedOptions.map(option => option.name)
					const code = selectedOptions.map(v => v.code)
					this.area = selectedOptions.map(option => option.name).join('/')
					this.address.contact_province_name = area[0]
					this.address.contact_province_id = code[0]
					this.address.contact_city_name = area[1]
					this.address.contact_city_id = code[1]
					this.address.contact_district_name = area[2]
					this.address.contact_district_id = code[2]
				},
			},
			components: {},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
